<template>
	<div class="table-box">
		<proTable
			ref="proTableRef"
			:columns="columns"
			:toolButton="false"
			:requestApi="api.GetPaymentOrderInfoList"
			:initParam="initParam"
			:dataCallback="dataCallback"
		>
			<template #operation="scope">
				<el-space wrap>
					<el-tag style="cursor: pointer" @click="handleRegiseDetailClick"> 报名详情 </el-tag>

					<el-tag @click="pushclick(scope.row.id)" style="cursor: pointer" type="info"> 订单详情 </el-tag>
				</el-space>
			</template>
			<template #competitionName="scope">
				{{ scope.row.competitionName }}
			</template>
			<template v-if="!isPlatform" #companyName="scope">
				{{ scope.row.companyName }}
			</template>
		</proTable>
	</div>
</template>
<script lang="ts" setup name="logs">
import { ref, reactive, computed } from "vue";
import api from "@/api/modules/paymentOrderInfo";
import { useRouter } from "vue-router";
import { ColumnProps } from "@/components/ProTable/interface";
import proTable from "@/components/ProTable/index.vue";
import { GlobalStore } from "@/stores";
const globalStore = GlobalStore();
const isPlatform = globalStore.isPlatform;
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTableRef = ref();
const router = useRouter();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	isSelectSuccess: false,
	PaymentStatus: null
});

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
	return {
		list: data.data,
		total: data.totalCount
	};
};
// 赛事选项
const getCompetitionsList = async () => {
	let { result } = await api.GetCompetitionsList();
	let { data } = result as any;
	if (!data) return [];
	data.unshift({ name: "全部", id: "" });
	return result;
};
// 商户选项
const getCompanysList = async () => {
	let { result } = await api.GetCompanysList();
	let { data } = result as any;
	if (!data) return [];
	data.unshift({ companyName: "全部", id: "" });
	return result;
};
// 表格配置项
const columns = computed((): Partial<ColumnProps>[] => {
	let data: Partial<ColumnProps>[] = [
		{ prop: "employeeName", label: "提交用户" },
		{ prop: "contactTel", label: "联系电话" },
		{ prop: "competitionName", label: "报名赛事" },
		{
			prop: "CompetitionID",
			label: "报名赛事",
			isShow: false,
			enum: getCompetitionsList,
			search: { el: "select", props: { filterable: true }, defaultValue: "" },
			fieldNames: { label: "name", value: "id" }
		},
		{ prop: "paymentFee", label: "报名费用" },
		{
			prop: "companyID",
			label: "赛事创建商户",
			isShow: false,
			enum: getCompanysList,
			search: { el: "select", props: { filterable: true }, defaultValue: "" },
			fieldNames: { label: "companyName", value: "id" }
		},
		{
			prop: "companyName",
			label: "赛事创建商户",
			isShow: !isPlatform
		},
		{ prop: "submitTime", label: "提交时间" },
		{ prop: "paymentStatus", label: "支付状态" },
		{ prop: "paymentTime", label: "支付时间" },
		{ prop: "paymentMethod", label: "支付方式" },
		{
			prop: "key",
			label: "关键字",
			isShow: false,
			search: { el: "input", props: { placeholder: "请输入提交用户或联系电话" } }
		},
		{ prop: "operation", label: "操作", width: 200, fixed: "right" }
	];
	if (isPlatform) {
		data = data.filter(i => i.prop != "companyID");
		return data;
	}
	return data;
});
// 报名详情
const handleRegiseDetailClick = () => {
	router.push("/competition/registration");
};
// 订单详情
const pushclick = (row: object) => {
	router.push("/order/detail?Id=" + row);
};
</script>
